<template>
  <commonformdialog
    :isshowDialogs="isshowDialog"
    :dialogTitle="dialogTitle"
    @closetextDialog="closeDialog"
    @confirmbtn="confirmbtn"
    :topHeight='"8vh"'
  >
    <div class="formarea">
      <el-form
        ref="bmdform"
        :model="bmdforms"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <warning
          :width="'97%'"
          style="margin-bottom: 20px; position: relative; left: 10px"
        >
          <p>
            提示：为了方便学员更好找到您驾校的报名点，报名点名称请以“报名点”作为结尾，例如：成都驾校报名点
          </p>
        </warning>
        <el-form-item label="报名点" prop="title">
          <el-input
            v-model="bmdforms.title"
            placeholder="请输入报名点"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="关联校区" prop="school_id">
          <el-select
            collapse-tags
            v-model="bmdforms.school_id"
            placeholder="请选择关联校区"

            clearable
            :style="{ width: '100%' }"
            @change="checkAll($event)"
          >
          <!--  <el-option :label="slesecAlltext" value="0"></el-option> -->
            <el-option
              v-for="(item, index) in school_idOptions"
              :key="index"
              :label="item.title"
              :value="item.id"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系人" prop="link_man">
          <el-input
            v-model="bmdforms.link_man"
            placeholder="请输入联系人"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="link_tel">
          <el-input
            v-model="bmdforms.link_tel"
            placeholder="请输入联系电话"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>

        <el-form-item label="地址" prop="address">
          <el-input
            placeholder="请点击右边选择地图来选择地址"
            :disabled="true"
            v-model="bmdforms.address"
          >
            <template slot="append">
              <el-button @click="selectmap">选择地图</el-button>
            </template>
          </el-input>

          <mapDialog
            v-if="isshowmap"
            :isshowmapDialog="isshowmap"
            @closemap="closemap"
            @affirmMaps="affirmMap"
            :userSelectinfo="selectmapinfo"
          ></mapDialog>

        </el-form-item>
        <el-row>
          <el-form-item label="备注" prop="remark">
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入备注"
              v-model="bmdforms.remark"
            ></el-input>
          </el-form-item>
          <el-col :span="12">
            <el-form-item label="经营方式" prop="belong_type">
              <el-radio-group v-model="bmdforms.belong_type" size="medium">
                <el-radio
                  v-for="(item, index) in belong_typeOptions"
                  :key="index"
                  :label="item.value"
                  :disabled="item.disabled"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="基础设施" prop="facilities">
          <el-checkbox-group v-model="bmdforms.facilities" size="medium">
            <el-checkbox
              v-for="(item, index) in facilitiesOption"
              :key="index"
              :label="item.id"
              :disabled="item.disabled"
            >
              {{ item.title }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="封面图" prop="head_img">
          <uploadimg
            @deleteimg="head_imgdel"
            :imgModel="bmdforms.head_img"
            @uploadimgok="head_imgok"
          >
            <span slot="text">支持上传不大于10M的JPEG、JPG、PNG、BMP图片</span>
          </uploadimg>
        </el-form-item>
      </el-form>
    </div>
  </commonformdialog>
</template>

<script>
import warning from '@/components/warnins/index'
import commonformdialog from '@/components/commondialog/commondialog'
//地图弹窗组件
import mapDialog from '@/components/selectmap/selectmap'
//引入图片上传组件
import uploadimg from '@/components/uploadimg/uploadimg'
//api
import { createadd, readData, updateData } from '@/api/enroll'
import { getSessionStorage } from '@/utils/accessToken'
export default {
  data() {
    return {
      slesecAlltext: '选择所有校区',
      //是否选中了全选
      isSelectAll: false,
      //用户选择的地图
      selectmapinfo: {},
      //是否显示地图
      isshowmap: false,
      //用户选择的坐标信息
      bmdforms: {
        title: '',
        school_id:'',
        link_man: '',
        link_tel: '',
        address: '',
        head_img: '',
        lat: '',
        lng: '',
        belong_type: '',
        remark:'',
        facilities: [],
      },
      facilitiesOption: [
        {
          label: '免费WIFI',
          value: 1,
        },
        {
          label: '商店',
          value: 2,
        },
        {
          label: '餐厅',
          value: 3,
        },
        {
          label: '咖啡厅',
          value: 4,
        },
        {
          label: '休息区',
          value: 5,
        },
      ],
      rules: {
        belong_type: [
          {
            required: true,
            message: '请选择经营方式！',
            trigger: 'blur',
          },
        ],
        title: [
          {
            required: true,
            message: '请输入报名点',
            trigger: 'blur',
          },
          {
            pattern: /报名点$/,
            message: '必须以“报名点”结尾',
            trigger: 'blur',
          },
        ],
        school_id: [
          {
            required: true,
            message: '请至少选择一个关联校区',
            trigger: 'change',
          },
        ],
        link_man: [
          {
            required: true,
            message: '请输入联系人',
            trigger: 'blur',
          },
        ],
        address: [
          {
            required: true,
            message: '请选择地址',
            trigger: 'change',
          },
        ],
        head_img: [
          {
            required: true,
            message: '请上传报名点图片',
            trigger: 'change',
          },
        ],
        link_tel: [
          {
            required: true,
            message: '请输入联系电话',
            trigger: 'blur',
          },
          {
            pattern: /^1\d{10}$/,
            message: '手机号有误',
            trigger: 'blur',
          },
        ],
      },
      belong_typeOptions: [
        {
          label: '直营',
          value: 1,
        },
        {
          label: '加盟',
          value: 2,
        },
      ],
      //关联校区
      school_idOptions: [],
    }
  },
  components: {
    commonformdialog,
    mapDialog,
    uploadimg,
    warning,
  },
  props: {
    //是否显示弹窗
    isshowDialog: {
      type: Boolean,
      default: false,
      required: true,
    },
    //表单的名字
    dialogTitle: {
      type: String,
      default: '',
      required: true,
    },
    //是编辑还是新增
    formType: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    //如果关联分校选择 checkAll == 1 那么久全选 否则就不全选
    checkAll(val) {
      //选中的length
      // let len = this.bmdforms.school_id.length
      // //选择的id
      // let selectId = val[len - 1]
      // //如果等于0 说明选中了全部
      // //判断值是否为空的时候
      // if (len < 1) {
      //   console.log('值为空')
      //   this.slesecAlltext = '选择所有校区'
      //   this.isSelectAll = false
      // }
      // if (selectId == 0) {
      //   let allValues = this.school_idOptions.map((item) => {
      //     return item.id
      //   })
      //   if (!this.isSelectAll) {
      //     this.bmdforms.school_id = allValues
      //     this.slesecAlltext = '取消所有校区'
      //     this.isSelectAll = !this.isSelectAll
      //   } else {
      //     this.bmdforms.school_id = ''
      //     this.slesecAlltext = '选择所有校区'
      //     this.isSelectAll = !this.isSelectAll
      //   }
      // }
    },
    //删除图片
    head_imgdel() {
      this.bmdforms.head_img = ''
    },
    //上传图片成功 返回图片URL
    head_imgok(imgUrl) {
      this.bmdforms.head_img = imgUrl
    },
    closeDialog() {
      //重置表单
      this.$refs['bmdform'].resetFields()
      this.$emit('closedialog')
      this.slesecAlltext = '选择所有校区'
      this.isSelectAll = false
      //清理地图数据
      this.selectmapinfo = {}
    },
    confirmbtn() {
      this.$refs['bmdform'].validate(async (valid) => {
        if (!valid) return
        let {
          title,
          school_id,
          link_man,
          link_tel,
          address,
          lat,
          lng,
          belong_type,
          head_img,
          facilities,
          remark
        } = this.bmdforms
        // 提交表单
        let params = {
          title,
          school_id,
          link_man,
          link_tel,
          address,
          lat,
          lng,
          head_img,
          belong_type,
          facilities:facilities.join(','),
          remark
        }
        if (this.formType == 0) {
          let data = await createadd(params)
          console.log(data)
          if (data.code == '0000') {
            this.$message({
              type: 'success',
              message: '添加成功!',
            })
            //清空表单
            this.$refs['bmdform'].resetFields()
            this.$emit('confirm')
            this.selectmapinfo = {}
          }
        } else {
          let { id, school_ids, school_id } = this.bmdforms
          params.id = id
          let data = await updateData(params)
          if (data.code == '0000') {
            this.$message({
              type: 'success',
              message: '编辑报名点成功!',
            })
            this.$refs['bmdform'].resetFields()
            this.$emit('confirm')
            //清空地图数据
            this.selectmapinfo = {}
          }
        }
      })
    },
    //用户选择地图
    selectmap() {
      //打开弹窗
      this.isshowmap = true
    },
    //关闭地图弹窗
    closemap() {
      this.isshowmap = false
    },
    //用户确认选择地图
    affirmMap(params) {
      console.log(params)
      this.selectmapinfo = params
      this.bmdforms.address = params.address
      this.bmdforms.lat = params.lat
      this.bmdforms.lng = params.lng
      this.isshowmap = false
    },
  },
  mounted() {
    //基础设施选项
    this.facilitiesOption = getSessionStorage('Options')[20]
    console.log('this.facilitiesOption',this.facilitiesOption)
    this.school_idOptions = getSessionStorage('Optionsall')['school']
    //兄弟組件傳值
    this.$bus.on('editreadform', async (val) => {
      let data = await readData({ id: val.id })
      let {
        title,
        school_id,
        link_man,
        link_tel,
        address,
        head_img,
        lat,
        lng,
      } = data.data
      this.slesecAlltext = '取消所有校区'
      this.isSelectAll = true
      this.bmdforms = data.data
      this.bmdforms.school_ids = school_id
        this.bmdforms.facilities = data.data.facilities.value
      console.log(school_id.value)
      this.bmdforms.school_id = school_id.value
      this.selectmapinfo = {
        address,
        lat,
        lng,
      }
    })
  },
 destroyed(){
    this.$bus.off("editreadform")
  }
}
</script>

<style scoped lang='scss'>
  .formtips {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.4);
    margin-left: 100px;
  }
</style>
